
<div class="body mask-top">
    <div [innerHTML]="part_mask" *ngIf="isAjax"></div>

    <div class="panel panel-primary menu" *ngFor="let menu of ArrayMenus">
        <div class="panel-heading">
            <span class="panel-title" [innerHTML]="menu.MenuName"></span>
            <ng-container *ngTemplateOutlet="Handle; context:{menu:menu,menus:ArrayMenus}"></ng-container>
        </div>
        <ng-container *ngIf="menu.children&&menu.children.length>0">
            <div class="panel-body">
                <ng-container *ngTemplateOutlet="recursive; context:menu"></ng-container>
            </div>
        </ng-container>
    </div>

    <ng-template #recursive let-menus="children">
        <ul class="list-group">
            <li class="list-group-item bg" *ngFor="let menu of menus">
                <ng-container *ngIf="menu.children&&menu.children.length>0">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <span class="panel-title" [innerHTML]="menu.MenuName"></span>
                            <ng-container *ngTemplateOutlet="Handle; context:{menu:menu,menus:menus}"></ng-container>
                        </div>
                        <div class="panel-body">
                            <ng-container *ngTemplateOutlet="recursive; context:menu"></ng-container>
                        </div>
                    </div>
                </ng-container>
                <ng-container *ngIf="!menu.children||menu.children.length<=0">
                    <ng-container *ngIf="!(menu.MenuName.includes('<')&&menu.MenuName.includes('>'))">
                        <span>{{menu.MenuName}}</span>
                    </ng-container>
                    <ng-container *ngIf="menu.MenuName.includes('<')&&menu.MenuName.includes('>')">
                        <span [innerHTML]="menu.MenuName"></span>
                    </ng-container>


                    <!--<span>{{menu.MenuName}}</span>-->
                    <ng-container *ngTemplateOutlet="Handle; context:{menu:menu,menus:menus}"></ng-container>
                </ng-container>


            </li>
        </ul>
    </ng-template>


    <ng-template #Handle let-menu="menu" let-menus="menus">
        <span class="glyphicon glyphicon-remove-circle" data-toggle="modal" data-target="#warming" (click)="deleteMenu(menu)" *ngIf="(!menu.children||menu.children.length<=0) && menu.isDelete"></span>
        <span class="glyphicon glyphicon-circle-arrow-down" (click)="downMenu(menu)" *ngIf="menu!==menus[menus.length-1]"></span>
        <span class="glyphicon glyphicon-circle-arrow-up" (click)="upMenu(menu)" *ngIf="menu!==menus[0]"></span>
        <span class="glyphicon glyphicon-pencil" data-toggle="modal" data-target="#myModal" (click)="selectMenu(menu)" *ngIf="menu.isWrite"></span>
        <span class="glyphicon glyphicon-plus-sign" data-toggle="modal" data-target="#myModal" *ngIf="menu.parentID==0" (click)="createMenu(menu)" ></span>
    </ng-template>


    <div class="addMenu" data-toggle="modal" data-target="#myModal" (click)="createTopMenu()"><span class="glyphicon glyphicon-plus-sign"></span></div>

</div>
<!-- Button trigger modal -->





<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">新增菜单</h4>
            </div>

                <form class="form-horizontal" (ngSubmit)="handleMenu()" #createForm="ngForm">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">菜单名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="menuName"
                                       [(ngModel)]="updateMenu.MenuName" required
                                       placeholder="菜单显示名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">菜单路径</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="menuUrl"
                                       [(ngModel)]="updateMenu.MenuURL"
                                       pattern="[\x21-\x7e]*" ngModel
                                       placeholder="菜单路径">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-4">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" [(ngModel)]="updateMenu.isDelete" name="delete"> 是否可删除?
                                    </label>
                                </div>
                            </div>

                            <div class=" col-sm-4">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" [(ngModel)]="updateMenu.isWrite" name="write"> 是否可修改?
                                    </label>
                                </div>
                            </div>

                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-info" >清空</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary" [disabled]="!createForm.form.valid">保存</button>
                    </div>
                </form>

        </div>
    </div>
</div>




<div class="modal fade" id="warming" tabindex="-2" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >删除警告：</h4>
            </div>
            <div class="modal-body">
                <h2>您确定要删除此菜单节点?</h2>
                <p class="error-color">{{_message}}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-warning" (click)="handleMenu()" [disabled]="_isHttp">确定</button>
            </div>
        </div>
    </div>
</div>




<!--
<div class="MaskLayer" [hidden]="!isAjax">

</div>-->
